import { createApp } from "vue";
import { createPinia } from "pinia";
import piniaPersist from "pinia-plugin-persist";

import App from "./App.vue";
import router from "./router";

import Button from "./components/Button/index.vue";
import "@/assets/main.css";
import "@/assets/index.scss";
import "./assets/tailMain.css";
const myPlugin = {
  install(App: any) {
    // Add global directives
    App.directive("border", {
      mounted(el: HTMLElement) {
        el.style.border = "1px solid red";
      },
    });
  },
};

const pinia = createPinia();
pinia.use(piniaPersist);

createApp(App)
  .component("btn", Button)
  .use(myPlugin)
  .use(pinia)
  .use(router)
  .mount("#app");
